<script setup>
import * as echarts from 'echarts';
const chartRef = ref();
let chart;
let resizeObserver;
const loading = ref(true);

onMounted(async () => {
  chart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '1%',
      left: 'center',
      itemStyle: {
        borderWidth: 0
      }
    },
    series: [
      {
        color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
        name: '工作安排',
        type: 'pie',
        radius: ['45%', '75%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { name: '学习', value: 20 },
          { name: '娱乐', value: 10 },
          { name: '工作', value: 40 },
          { name: '休息', value: 30 }
        ]
      }
    ]
  };
  chart.setOption(option);
  //  自动监听容器大小变化，触发图表 resize
  resizeObserver = new ResizeObserver(() => {
    chart.resize();
  });
  resizeObserver.observe(chartRef.value);
});

onBeforeUnmount(() => {
  chart?.dispose();
  resizeObserver?.disconnect();
});
</script>

<template>
  <ElCard class="rd-8px shadow-sm">
    <div ref="chartRef" style="width: 100%; height: 350px" />
  </ElCard>
</template>
<style lang="scss" scoped></style>
